<template>
  <view class="container pageBg">
    <!-- 添加表单 -->
    <view class="add-form">
      <input v-model="newTodo.reminder" placeholder="请输入事项标题" class="input" />
      <textarea v-model="newTodo.notes" placeholder="请输入备注信息" class="textarea" />
      
      <view class="form-row">
        <text class="label">提醒时间：</text>
        <picker mode="date" :value="newTodo.remindTime" @change="onDateChange">
          <view class="picker">{{ newTodo.remindDate || '选择日期' }}</view>
        </picker>
        <picker mode="time" :value="newTodo.remindTime" @change="onTimeChange">
          <view class="picker">{{ newTodo.remindTime || '选择时间' }}</view>
        </picker>
      </view>

      <view class="form-row">
        <text class="label">提醒方式：</text>
        <radio-group @change="onreminderMethodChange">
          <label class="radio-item">
            <radio value="phone" color="#007AFF" />电话
          </label>
          <label class="radio-item">
            <radio value="email" color="#007AFF" />邮件
          </label>
          <label class="radio-item">
            <radio value="both" color="#007AFF" />两者
          </label>
        </radio-group>
      </view>

      <button class="add-btn" @click="addTodo">添加待办</button>
    </view>

    <!-- 待办列表 -->
    <view class="todo-list">
      <view v-for="(item, index) in todoList" :key="item.id" class="todo-item">
        <view class="todo-content">
          <text class="todo-reminder">{{ item.reminder }}
		  <view class="action-item">
		    <uni-icons :type="!item.isCompleted ? 'notification' : 'notification-filled'" color="#00d7fb" />
			<text v-show="item.isCompleted" style="font-size: 10px;">已提醒</text>
			<text v-show="!item.isCompleted" style="font-size: 10px;">未提醒</text>
		  </view>
		  
		  </text>
          <text class="todo-time">{{ formatTime(item.remindTime) }}</text>
          <text class="todo-notes">{{ item.notes }}</text>
          <text class="todo-type">提醒方式：{{ reminderMethodMap[item.reminderMethod] }} 
		  </text>
		  <text class="todo-type">提醒时间: {{item.reminderTime}}
		  </text>
		
        </view>
        <view class="todo-actions">
          <text class="action-btn delete" @click="deleteTodo(item.id)">删除</text>
        </view>
		
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
const reminderMethodMap = {
  phone: '电话提醒',
  email: '邮件提醒',
  both: '电话+邮件提醒'
}
// 新待办事项模板
const newTodo = ref({
  id: '',
  reminder: '',
  notes: '',
  remindDate: '',
  remindTime: '',
  reminderMethod: 'phone'
})

// 待办事项列表
const todoList = ref([])
// 初始化加载数据
onMounted(() => {
  getListTask();
})
const getListTask=()=>{
	uni.request({
	  url: 'http://localhost:8081/reminders/todoList', 
	  method: 'GET',
		header: {
		   'Authorization': 'Bearer ' + uni.getStorageSync('token') // 从本地存储获取token
		},
	  success: (res) => {
		
	    if (res.statusCode === 200) {
	      todoList.value = res.data
	    } else {
	      uni.showToast({ title: '获取待办事项失败', icon: 'none' })
	    }
	  },
	  fail: () => {
	    uni.showToast({ title: '请求失败', icon: 'none' })
	  }
	})
}

// 添加待办事项
const addTodo = () => {
  if (!newTodo.value.reminder) {
    uni.showToast({ title: '请输入标题', icon: 'none' })
    return
  }
  console.log("数据为: ",JSON.stringify(newTodo.value))
  uni.request({
    url: 'http://localhost:8081/reminders/newTask',
    method: 'POST',
    data: newTodo.value,
	header: {
	   'Authorization': 'Bearer ' + uni.getStorageSync('token') // 从本地存储获取token
	},
    success: (res) => {
      if (res.data.code === '200') {
        uni.showToast({ title: '任务添加成功', icon: 'success' })
		setTimeout(() => {
		  getListTask();
		}, 2000);
		resetForm();
      } else {
        uni.showToast({ title: "添加失败-"+res.data.message, icon: 'none' })
      }
    },
    fail: () => {
      uni.showToast({ title: '请求失败', icon: 'none' })
    }
  })
}

// 删除待办事项
const deleteTodo = (id) => {
  uni.showModal({
    title: '确认删除',
    content: '确定要删除这个待办事项吗？',
    success: (res) => {
      if (res.confirm) {
        uni.request({
          url: `http://localhost:8081/reminders/deleteTask/${id}`, 
		  method: 'POST',
		  header: {
		     'Authorization': 'Bearer ' + uni.getStorageSync('token') // 从本地存储获取token
		  },
          success: (res) => { 
            if (res.statusCode === 200) {
              uni.showToast({ title: '删除成功', icon: 'success' })
			  setTimeout(() => {
			    getListTask();
			  }, 2000);
            } else {
              uni.showToast({ title: '删除失败', icon: 'none' })
            }
          },
          fail: () => {
            uni.showToast({ title: '请求失败', icon: 'none' })
          }
        })
      }
    }
  })
}
// 日期选择
const onDateChange = (e) => {
  newTodo.value.remindDate = e.detail.value
}

// 时间选择
const onTimeChange = (e) => {
  newTodo.value.remindTime = e.detail.value
}

// 提醒方式选择
const onreminderMethodChange = (e) => {
  newTodo.value.reminderMethod = e.detail.value
}
// 重置表单
const resetForm = () => {
  newTodo.value = {
    reminder: '',
    notes: '',
    remindDate: '',
    remindTime: '',
    reminderMethod: 'phone'
  }
}

// 格式化时间显示
const formatTime = (timeString) => {
  if (!timeString) return ''
  const date = new Date(timeString)
  return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}`
}
</script>

<style scoped>
.container {
  padding: 30rpx;
}

.add-form {
  background: #fff;
  padding: 30rpx;
  border-radius: 16rpx;
  margin-bottom: 40rpx;
}
.action-item {
  display: flex;
  align-items: center;
  gap: 10rpx;
  color: #666;
}
.input {
  height: 80rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  padding: 0 20rpx;
  margin-bottom: 30rpx;
}

.textarea {
  height: 160rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  padding: 20rpx;
  margin-bottom: 30rpx;
}

.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.label {
  font-size: 28rpx;
  color: #666;
  margin-right: 20rpx;
}

.picker {
  padding: 15rpx 30rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.radio-item {
  margin-right: 40rpx;
  font-size: 28rpx;
}

.add-btn {
  background: #007AFF;
  color: white;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  font-size: 32rpx;
}

.todo-list {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
}

.todo-item {
  display: flex;
  justify-content: space-between;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #eee;
}

.todo-content {
  flex: 1;
}

.todo-reminder {
  display: block;
  font-size: 32rpx;
  color: #333;
  margin-bottom: 15rpx;
}

.todo-time {
  display: block;
  font-size: 26rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.todo-notes {
  display: block;
  font-size: 26rpx;
  color: #999;
}

.todo-type {
  display: block;
  font-size: 26rpx;
  color: #007AFF;
  margin-top: 15rpx;
}

.todo-actions {
  display: flex;
  align-items: center;
}

.action-btn {
  padding: 10rpx 20rpx;
  border-radius: 8rpx;
  font-size: 26rpx;
}

.delete {
  color: #ff4444;
  border: 1rpx solid #ff4444;
}
</style>